<template>
	<view class="emain animated fadeIn faster">
		<view class="position-fixed w-100 z-index-100 pb-1" :style="{'paddingTop':$store.state.statusBarHeight+'px','backgroundColor':bgcolor}">
			<view class="d-flex d-flex-middle d-flex-between" :style="{'height': $store.state.titleBarHeight + 'px'}">
				<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font30 colorfff"></text></view>
				<view class="colorfff">编辑搭子卡</view>
				<text class="iconfont icon-31fanhui1 font30 colorfff vhiden"></text>
			</view>
		</view>
		<view :style="{paddingTop:$store.state.statusBarHeight+'px',height: $store.state.titleBarHeight + 'px'}"></view>
		<view class="px-1 mt-6 pb-5">
			<view class="px-3 pt-3 pb-5" style="background-color: #15325B;border-radius: 36rpx;">
				<view class="d-flex d-flex-middle mb-5">
					<image class="rounded mr-1" src="https://gdown.baidu.com/appcenter/source/1396538632/cb06b8d26ddda8c0f792a0dc5a65b6e8/res/mipmap-xxxhdpi-v4/app_icon.png" style="width: 30rpx;height: 30rpx;"></image>
					<text class="colorfff font26">王者荣耀</text>
				</view>
				<view style="margin-bottom: 140rpx;">
					<text class="colorfff font56 font-bold">找搭子宣言找搭子找搭子找搭子</text>
				</view>
				<view class="p-2 d-flex d-flex-middle position-relative mb-4" style="background: #1e3767;border-radius: 30rpx;height: 200rpx;">
					<view class="position-absolute top-0 right-0 p-2">
						<text class="iconfont icon-bangzhu color739bce"></text>
					</view>
					<view class="mr-4 d-flex d-flex-center d-flex-middle" style="width: 250rpx;height: 200rpx;">
						<view class="charts-box">
						  <qiun-data-charts 
						    type="radar"
							:reshow="true"
						    :opts="opts"
						    :chartData="chartData"
						  />
						</view>
					</view>
					<view class="d-flex d-flex-column">
						<view class="font-bold color739bce mb-1">测一测我的交友战力！</view>
						<view class="font22 color597bac" style="margin-bottom: 25rpx;">重新测评在72小时后，请认真填写哦</view>
						<view class="bgC7C8C9 rounded30 d-flex d-flex-middle">
							<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/edite1088.png" style="width: 58rpx;height: 58rpx;"></image>
							<text class="colorfff font22">立即测试</text>
						</view>
					</view>
				</view>
				<view class="d-flex d-flex-baseline mb-2">
					<text class="font32 colorfff mr-2">添加照片</text>
					<text class="font22 colorg7">晒出最能代表你特点的照片吧！</text>
				</view>
				<view class="d-flex d-flex-between mb-4">
					<view class="plus-img d-flex d-flex-center d-flex-middle">
						<!-- <text class="iconfont icon-jia1"></text> -->
						<image class="plus-img" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/edite1071.png"></image>
					</view>
					<view class="plus-img d-flex d-flex-center d-flex-middle">
						<text class="iconfont icon-jia1"></text>
					</view>
					<view class="plus-img d-flex d-flex-center d-flex-middle">
						<text class="iconfont icon-jia1"></text>
					</view>
				</view>
				
				<view class="d-flex d-flex-between d-flex-middle mb-2">
					<view class="d-flex d-flex-baseline">
						<text class="font32 colorfff mr-1">交友目的</text>
						<text class="font22 colorg7">（多选）</text>
					</view>
					<view class="d-flex d-flex-middle">
						<text class="font20 colorg7 mr">展开</text>
						<text class="font20 colorg7 iconfont icon-right-circle-down-copy"></text>
					</view>
				</view>
				<view class="d-flex d-flex-wrap mb-2">
					<view class="xuanzhe">人皮话多</view>
					<view class="xuanzhe">情绪稳定</view>
					<view class="xuanzhe onxz">有趣灵魂</view>
					<view class="xuanzhe">全能高手</view>
				</view>
				
				<view class="d-flex d-flex-between d-flex-middle mb-2">
					<view class="d-flex d-flex-baseline">
						<text class="font32 colorfff mr-1">区服</text>
						<text class="font20 colorg7">（多选）</text>
					</view>
					<view class="d-flex d-flex-middle">
						<text class="font22 colorg7 mr">展开</text>
						<text class="font20 colorg7 iconfont icon-right-circle-down-copy"></text>
					</view>
				</view>
				<view class="d-flex d-flex-wrap mb-5">
					<view class="xuanzhe">人皮话多</view>
					<view class="xuanzhe">情绪稳定</view>
					<view class="xuanzhe onxz">有趣灵魂</view>
					<view class="xuanzhe">全能高手</view>
				</view>
				
				
				<view class="d-flex d-flex-center">
					<view class="btn-edit d-flex d-flex-center d-flex-middle rounded50">
						<text class="colorfff font32">保持搭子卡</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { manner } from "@/util/manner.js";
	export default {
		data() {
			return {
				bgcolor:'transparent',
				chartData: {},
				opts: {
					color: ["#9A60B4","#ea7ccc","#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452"],
					padding: [0,0,0,0],
					dataLabel: false,
					enableScroll: false,
					width:100,
					height:100,
					fontSize: 10,
					legend: {
						show: false,
						position: "right",
						lineHeight: 25,
					},
					extra: {
						radar: {
							gridType: "radar",
							gridColor: "#334c7c",
							gridCount: 3,
							opacity: .6,
							max: 10,
							fontSize:10,
							labelShow: true,
							border: false,
						},
					}
				}
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			if (scrollTop > 20) {
				this.bgcolor = '#74749c'
			}else{
				this.bgcolor = 'transparent'
			}
		},
		onReady() {
			this.getServerData()
		},
		methods: {
			goBack(){
				manner.goBack()
			},
			getServerData() {
			  setTimeout(() => {
			    let res = {
			        categories: ["维度1","维度2","维度3","维度4","维度5","维度6"],
			        series: [
			          {
			            name: "",
			            data: [45,98,165,195,187,172]
			          },
			          {
			            name: "",
			            data: [120,100,105,35,27,102]
			          }
			        ]
			      };
			    this.chartData = JSON.parse(JSON.stringify(res));
			  }, 500);
			},
		}
	}
</script>

<style scoped>
.emain{
	background-image: url('https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/maskbg.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 100%;
	min-height: 100vh;
	position: relative;
}
.charts-box {
	width: 300rpx;
	height: 300rpx;
}
.color739bce{color:#739bce}
.color597bac{color:#597bac}
.bgC7C8C9{background: #4b5f87;width: 170rpx;}
.plus-img{
	width: 180rpx;
	height: 180rpx;
	border-radius: 36rpx;
	background-color: #1e3767;
	color: #385fa5;
}
.colorg7{
	color: rgba(255, 255, 255, .5)
}
.xuanzhe{
	border: 1px solid #C7C8C9;
	border-radius: 30rpx;
	padding:10rpx 20rpx;
	color: #ffffff;
	font-size: 26rpx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
}
.onxz{
	background: #CFF0FB;
	color: #46C4FF;
}
.btn-edit{
	background-image: linear-gradient(to right, #e65fd0, #69adf8);
	height: 90rpx;
	width: 430rpx;
}
</style>

